<template>
    <div>
        <img class="user-poster" src="../assets/banner.jpg">
        <van-cell-group>
            <van-field
                    v-model="name"
                    required
                    clearable
                    label="用户名"
                    right-icon="question-o"
                    placeholder="请输入用户名"
                    @click-right-icon="$toast('用户编号')"
            />

            <van-field
                    v-model="password"
                    type="password"
                    label="密码"
                    placeholder="请输入密码"
                    required
            />
            <van-button type="primary" size="large" @click="login">登录</van-button>
        </van-cell-group>
    </div>
</template>

<script>
  import { login } from '@/api'
  import { Field, Button, Toast, Cell, CellGroup } from 'vant'
  import Cookies from 'js-cookie'

  export default {
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button
    },
    data () {
      return {
        name: '', // 员工编号
        password: ''
      }
    },
    methods: {
      login () {
        let data = {name: this.name, password: this.password}
        login(data).then((res) => {
          Toast(res.message)
          if (res.code === 200) {
            this.$router.push({path: '/'})
          }
        })
      }
    },
    mounted () {
      Cookies.remove('token')
    }
  }
</script>
<style lang="less">
    .red {
        color: red;
    }
    .green {
        color: green;
    }
    .user {
    &-poster {
         width: 100%;
         height: 53vw;
         display: block;
     }
    &-group {
         margin-bottom: 15px;
     }
    &-links {
         padding: 15px 0;
         font-size: 12px;
         text-align: center;
         background-color: #fff;
    .van-icon {
        display: block;
        font-size: 24px;
    }
    }
    }
</style>
